<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crop Image - Test Page</title>
<link rel="stylesheet" href="../../../themes/flora/flora.all.css" type="text/css" media="screen" title="UI Standard">

<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

.proxy {
	border: 1px dotted black;	
}

</style>
</head>
<body>

<div id="imagecropper" style="position:relative;">

  <img src="images/houses.jpg">
  <div id="cropper" style="position:absolute;left:100px;top:60px;width:400px;height:300px;overflow:hidden;">
    <img src="images/houses.jpg" style="margin-left:-100px;margin-top:-60px;cursor:move;position:absolute;">
    <div class='ui-resizable-n ui-resizable-handle'></div>
    <div class='ui-resizable-s ui-resizable-handle'></div>
    <div class='ui-resizable-e ui-resizable-handle'></div>
    <div class='ui-resizable-w ui-resizable-handle'></div>
    <div class='ui-resizable-ne ui-resizable-handle'></div>
    <div class='ui-resizable-nw ui-resizable-handle'></div>
    <div class='ui-resizable-se ui-resizable-handle'></div>
    <div class='ui-resizable-sw ui-resizable-handle'></div>
  </div>

</div>

<script type="text/javascript">

$(document).ready(function(){
	
	var img = $('#cropper img');

	$('#imagecropper > img').css({position: 'absolute', opacity: 0.2});

	$('#cropper').draggable({
		handle: 'img',
		drag: function(ev, ui) {
			img.css({
				'margin-left': -(ui.position.left),
				'margin-top': -(ui.position.top)
			});
		}
	}).resizable({
		autohide: true,
		handles: {
			n: '.ui-resizable-n',
			s: '.ui-resizable-s',
			e: '.ui-resizable-e',
			w: '.ui-resizable-w',
			ne: '.ui-resizable-ne',
			nw: '.ui-resizable-nw',
			se: '.ui-resizable-se',
			sw: '.ui-resizable-sw'
		},
		resize: function(ev, ui) {
			img.css({
				'margin-left': -(ui.helper.offsetLeft),
				'margin-top': -(ui.helper.offsetTop)
			});
		}
	});

});
</script>
</body>
</html>
